<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>contact us</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">

.seat {width:50px;background:#000;color:red;}
#seatingPlan {border:1px;}

</style>
</head>
<body onload="document.getElementById('purchasedSeat').value='';">
<table id="seatingPlan">
<tr>
<td>
<input class="seat" type="button" value="A1" id="a1" name="11" onclick="document.getElementById('purchasedSeat').value+=this.value+',';this.disabled='true';this.style.background= '#ffffff';" /> 
</td>
<td>
<input class="seat" type="button" value="A2" id="b1" name="11" onclick="document.getElementById('purchasedSeat').value+=this.value+',';this.disabled='true';this.style.background= '#ffffff';" /> 
</td>
<td>
<input class="seat" type="button" value="A3" id="a11" name="11" onclick="document.getElementById('purchasedSeat').value+=this.value+',';this.disabled='true';this.style.background= '#ffffff';" /> 
</td>
</tr>

<tr>
<td>
<input class="seat" type="button" value="B1" id="a11" name="11" onclick="document.getElementById('purchasedSeat').value+=this.value+',';this.disabled='true';this.style.background= '#ffffff';" /> 
</td>
<td>
<input class="seat"  type="button" value="B2" id="a11" name="11" onclick="document.getElementById('purchasedSeat').value+=this.value+',';this.disabled='true';this.style.background= '#ffffff';" /> 
</td>
<td>
<input class="seat" type="button" value="B3" id="a11" name="11" onclick="document.getElementById('purchasedSeat').value+=this.value+',';this.disabled='true';this.style.background= '#ffffff';" /> 
</td>
</tr>
<tr>
<td>
<input class="seat" type="button" value="C1" id="a11" name="11" onclick="document.getElementById('purchasedSeat').value+=this.value+',';this.disabled='true';this.style.background= '#ffffff';" /> 
</td>
<td>
<input class="seat" type="button" value="C2" id="a11" name="11" onclick="document.getElementById('purchasedSeat').value+=this.value+',';this.disabled='true';this.style.background= '#ffffff';" /> 
</td>
<td>
<input class="seat" type="button" value="C3" id="a11" name="11" onclick="document.getElementById('purchasedSeat').value+=this.value+',';this.disabled='true';this.style.background= '#ffffff';" /> 
</td>
</tr>

</table>
<form>
<input type="text" value="" name="purchasedSeat" id="purchasedSeat" disabled="true"> 
<input type="submit" value="submit" name="submit" >
</form>
</body>
</html>